<<template>
	<div class="slide-show">
		<!-- Make a div wrapped slider,set height and width -->
		<div style="width:100%;height: 500px;" @mouseleave='swipeOut' @mouseover='swipeIn'>
			<!-- Using the slider component -->
			<slider ref="slider" :options="options" @slide='slide' @tap='onTap' @init='onInit'>
				<!-- slideritem wrapped package with the components you need -->
				<slideritem v-for="(item,index) in slides" :key="index" :style="item.style">
					<img :src="slides[index].src"  />
					<h4 style="position: absolute;left:10px;bottom: 20px;font-size: 18px;">{{slides[index].title}}</h4>
				</slideritem>
				<!-- Customizable loading -->
				<div slot="loading">loading...</div>
			</slider>
		</div>
	</div>
	</template>
	<script>
		import Vue from 'vue';
		// import slider components
		import { slider, slideritem } from 'vue-concise-slider'
		export default {
			name:'slide',
			props: {
				slides: {
					type: Array,
					default: []
				}
			},
			data() {
				return {
					//Slider configuration [obj]
					options: {
						currentPage: 0,
						thresholdDistance: 500,
						thresholdTime: 100,
						autoplay: 3000,
						loop: true,
						infinite: 1,
						slidesToScroll: 1,
						timingFunction: 'ease',
						duration: 2000,
						loopedSlides:1
					}
				}
			},
			methods: {
				// Listener event
				slide(data) {

				},
				onTap(data) {
					
				},
				onInit(data) {

				},
				swipeOut(data) {
					this.$refs.slider.$emit('autoplayStart')//鼠标移出，轮播滚动	
				},
				swipeIn(data) {
					this.$refs.slider.$emit('autoplayStop')//鼠标移入，轮播停止
				}

			},
			components: {
				slider,
				slideritem
			},
			mounted:function () {
			}
		}
	</script>

	<style scoped="scoped">
		.slide-show {
			position: relative;
			margin: 0 15px 15px 0;
			width: 900px;
			height: 500px;
			overflow: hidden;
		}
	</style>